<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>

        <div id="app">
            <h3>记事本</h3>
            <input placeholder="请输入任务" v-model="todoName" @keyup.enter="add"/>
            <button @click="add">添加任务</button>
            <br>
            <ul>
                <li v-for="(item, index) in todoList" :key="item.id">
                    <span>{{index + 1}}</span>
                    <span>{{item.todo}}</span>
                    <button @click="del(item.id)">删除</button>
                </li>
            </ul>
            <br>
            <div v-show="todoList.length > 0">
                <span>合计：<strong>{{ todoList.length }}</strong></span>
                <button @click="clean">清空</button>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    todoName : '',
                    todoList : [
                        {id: 1, todo: "todo1"},
                        {id: 2, todo: "todo2"},
                        {id: 3, todo: "todo3"},
                        {id: 4, todo: "todo4"}
                    ]
                },
                methods:{
                    add(){
                        this.todoList.unshift(
                            {id: +new Date(), todo: this.todoName}
                        )
                    },
                    del(id){
                        this.todoList = this.todoList.filter(item => item.id !== id)
                    },
                    clean(){
                        this.todoList = []
                    }
                }
            })
        </script>
    </body>
</html>